<script setup>
import { onMounted, ref } from 'vue'
import { UserFilled, Lock } from '@element-plus/icons-vue'
import Vcode from 'vue3-puzzle-vcode'
import { rules } from '@/utils/Login/formRules'
import { useRouter } from 'vue-router'
import { getKey, removeKey, setKey } from '@/utils/common/localStorage'
import { loginApi, registerApi } from '@/api/login'
import { useUserStore } from '@/stores/user'
import { showStatusMessage } from '@/utils/common/showMessage'
const userStore = useUserStore()
const router = useRouter()
const info = getKey('info')
import { animate, svg, stagger } from 'animejs';


const form = ref({
  account: info ? info.account : '',
  password: info ? info.password : '',
  identity: ''
})

const loginFormRef = ref(null)
// 拼图验证函数
const isShow = ref(false)

// 是否选择记住密码
const formSaveVal = ref(false)

// 表单重置
function resetForm() {
  loginFormRef.value.resetFields()
  form.value.account = ''
  form.value.password = ''
  // 跳转至注册页
  router.push('/register')
}
// 拼图验证成功函数
async function onSuccess() {
  isShow.value = false
  const res = await loginApi(form.value)
  userStore.token = res.token
  await setKeyToken('token', res.token)
  await setKeyToken('refreshToken', res.refreshToken)
  showStatusMessage(res)
  loginFormRef.value.resetFields()
  // 延时一下，因为这里存储token是异步，跳转路由是同步，会出现没有token权限获取
  setTimeout(() => {
    router.push('/home')
  }, 500)
}

function setKeyToken(key, value) {
  return new Promise((resolve, reject) => {
    // 假设这是一个异步操作，例如存储到 localStorage
    try {
      setKey(key, value)
      resolve() // 操作成功，调用 resolve
    } catch (error) {
      reject(error) // 操作失败，调用 reject
    }
  })
}

function changeFormSaveVal(e) {
  formSaveVal.value = e
}
// 登录按钮点击处理
function loginClick() {
  loginFormRef.value.validate(async (valid) => {
    if (!valid) {
      return
    }
    isShow.value = true
    if (formSaveVal.value) {
      setKey('info', { account: form.value.account, password: form.value.password })
    } else {
      removeKey('info')
    }
  })
}
// 忘记密码
function forgetPasswordFn() {
  router.push('/forgetPassword')
}
onMounted(()=>{
  animate(svg.createDrawable('.line'), {
  draw: ['0 0', '0 1', '1 1'],
  ease: 'inOutQuad',
  duration: 2000,
  delay: stagger(100),
  loop: true
});
})
</script>

<template>
  <div class="login-wrapper">
    <div class="decoration-circles">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
    </div>

    <div class="loginTitle">实习就业管理系统的设计与实现</div>
    <div>
      <!-- <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <text class="line" x="0" y="15" fill="red">实习就业管理系统的设计与实现</text>
      </svg> -->
    </div>

    <div class="system-info"></div>
    <div class="form-wrapper">
      <div class="form-title">
        <div class="title-top">欢迎登录</div>
        <div class="title-bottom">-----Welcome-----</div>
      </div>
      <div class="form-contennt">
        <!-- 登录  -->
        <el-form
          :model="form"
          label-width="auto"
          :rules="rules"
          ref="loginFormRef"
          hide-required-asterisk
        >
          <el-form-item prop="account">
            <el-icon :size="25" style="margin-right: 20px"><UserFilled /></el-icon>
            <el-input class="icon-input" v-model.trim="form.account" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item prop="password">
            <el-icon :size="25" style="margin-right: 20px"><Lock /></el-icon>
            <el-input
              v-model.trim="form.password"
              placeholder="请输入密码"
              type="password"
              show-password
            />
          </el-form-item>
          <el-form-item prop="identity">
            <label style="font-size: 16px">身份：</label>
            <el-radio-group v-model="form.identity">
              <el-radio value="学生">学生</el-radio>
              <el-radio value="辅导员">辅导员</el-radio>
              <el-radio value="企业">企业</el-radio>
              <el-radio value="管理员">管理员</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div class="form-config">
          <div class="form-save">
            <el-checkbox
              label="记住密码"
              :value="formSaveVal"
              :checked="formSaveVal"
              @change="changeFormSaveVal"
            />
          </div>
          <div class="form-reset" @click="resetForm">去注册</div>
          <div class="form-forget" @click="forgetPasswordFn">忘记密码</div>
        </div>
        <div class="form-footer">
          <el-button type="primary" @click="loginClick" size="large" class="login-btn"
            >登录</el-button
          >
        </div>
      </div>
    </div>
    <Vcode :show="isShow" @success="onSuccess" :sliderSize="40" />
  </div>
</template>

<style lang="scss" scoped>
.login-wrapper {
  position: relative;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, #2c77f8 50%, #fff 50%);

  .decoration-circles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;

    .circle {
      position: absolute;
      border-radius: 50%;

      &.circle-1 {
        width: 300px;
        height: 300px;
        background: rgba(44, 119, 248, 0.1);
        top: 10%;
        left: 10%;
      }

      &.circle-2 {
        width: 200px;
        height: 200px;
        background: rgba(9, 132, 203, 0.1);
        bottom: 15%;
        right: 15%;
      }

      &.circle-3 {
        width: 150px;
        height: 150px;
        background: rgba(44, 119, 248, 0.15);
        top: 40%;
        right: 25%;
      }
    }
  }

  .loginTitle {
    letter-spacing: 25px;
    font-family: 'DLB';
    font-size: 70px;
    margin-top: 40px;
    font-weight: 800;
    background: linear-gradient(45deg, #2c77f8, #fff, #2c77f8);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 5s linear infinite;
  }

  @keyframes shine {
    to {
      background-position: 200% center;
    }
  }

  .system-info {
    text-align: center;
    margin-top: 20px;

    .info-text {
      font-size: 24px;
      color: #fff;
      margin-bottom: 10px;
      letter-spacing: 3px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .info-subtext {
      font-size: 18px;
      color: rgba(255, 255, 255, 0.8);
      letter-spacing: 2px;
    }
  }

  .form-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 420px;
    transform: translate(-50%, -60%);
    padding: 20px 25px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(44, 119, 248, 0.3);
    backdrop-filter: blur(88px);
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;

    &:hover {
      transform: translate(-50%, -60%) scale(1.02);
      box-shadow: 0 0 40px rgba(44, 119, 248, 0.4);
    }

    .form-title {
      margin: 20px 0 5px 0;
      text-align: center;

      .title-top {
        font-size: 28px;
        font-family: 'PMZDR';
        letter-spacing: 10px;
        background: linear-gradient(45deg, #2c77f8, #0984cb);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: titleFloat 2s ease-in-out infinite;
        font-weight: bold;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .title-bottom {
        font-size: 16px;
        color: #0984cb;
        margin-top: 5px;
        opacity: 0.8;
      }
    }

    @keyframes titleFloat {
      0%,
      100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-5px);
      }
    }

    .form-contennt {
      padding: 10px 0;
    }

    .form-config {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      margin-top: 0px;
      margin-bottom: 20px;

      .form-reset,
      .form-forget {
        color: #2c77f8;
        text-decoration: underline;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #0984cb;
        }
      }
    }

    :deep() {
      .login-btn {
        height: 30px;
        font-size: 18px;
        padding: 15px 80px;
        position: relative;
        overflow: hidden;
        background: linear-gradient(45deg, #2c77f8 0%, #0984cb 50%, #2c77f8 100%);
        background-size: 200% 100%;
        border: none;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(44, 119, 248, 0.3);
        animation: gradientMove 3s linear infinite;

        &:hover {
          transform: translateY(-2px);
          background-size: 200% 100%;
          animation: gradientMove 1.5s linear infinite;
          box-shadow: 0 6px 24px rgba(44, 119, 248, 0.5);

          &::before {
            animation: shine-effect 1.5s ease-in-out infinite;
          }
        }

        &:active {
          transform: translateY(1px);
          box-shadow: 0 2px 10px rgba(44, 119, 248, 0.3);
        }
      }
    }
  }
}

:deep(.el-input) {
  width: 280px;
}

:deep(.el-input__wrapper) {
  height: 42px;
  border-radius: 20px;
  padding: 2px 20px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:focus-within {
    box-shadow: 0 2px 12px rgba(44, 119, 248, 0.2);
  }
}

:deep(.el-form-item) {
  margin-bottom: 25px;
}

:deep(.el-form-item__content) {
  flex-wrap: nowrap;
}

:deep(.el-input__inner) {
  &::placeholder {
    text-align: center;
  }
}

:deep(.el-form-item__error) {
  left: 70px;
}

// 增强的闪光效果动画
@keyframes shine-effect {
  0% {
    transform: rotate(45deg) translateX(-150%);
  }
  35%,
  100% {
    transform: rotate(45deg) translateX(150%);
  }
}

// 渐变移动动画
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>
